import { PlusOutlined, LoadingOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import { Upload, Tooltip } from 'antd';
import React, { useState } from 'react';

import { AppCreateTypeEnum, defaultImgList } from '@/common/app/constants';
import { CustomFormLabel } from '@/components/eai-design';
import { useOrchestrationStore } from '@/store/orchestrationStore';

import TipsModals from '../../modals/TipsModals';

import ImageDisplay, { DEFAULT_IMAGES } from './ImageDisplay';
import { SceneImageType } from './SceneImageSelector';

import type { UploadProps } from 'antd';

interface LogoSelectorProps {
  /** 是否展示提示 */
  showTip?: boolean;
  uploadedLogoUrl: string | null;
  selectedLogoId: string;
  customLogos: string[];
  loading: boolean;
  onSelect: (logoId: string) => void;
  onDelete: (logoUrl: string) => void;
  uploadProps: UploadProps;
  defaultAppName?: string;
  appType?: string;
  titleName?: string;
  labelClassName?: string;
}

const logos: SceneImageType[] = [
  {
    id: 'default',
    type: 'default',
    name: '默认',
  },
  {
    id: 'defaultLogo1',
    type: 'default',
    name: '默认',
  },
  {
    id: 'defaultLogo2',
    type: 'default',
    name: '默认',
  },
];

export const agentLogos: SceneImageType[] = [
  {
    id: 'default',
    type: 'default',
    name: '默认',
  },
  {
    id: 'agentLogo2',
    type: 'default',
    name: '默认',
  },
  {
    id: 'agentLogo3',
    type: 'default',
    name: '默认',
  },
];

export const workflowLogos: SceneImageType[] = [
  {
    id: 'workflowLogo1',
    type: 'default',
    name: '默认',
  },
  {
    id: 'workflowLogo2',
    type: 'default',
    name: '默认',
  },
  {
    id: 'workflowLogo3',
    type: 'default',
    name: '默认',
  },
];

export const mcpLogos: SceneImageType[] = [
  {
    id: 'mcpLogo1',
    type: 'default',
    name: '默认',
  },
  {
    id: 'mcpLogo2',
    type: 'default',
    name: '默认',
  },
  {
    id: 'mcpLogo3',
    type: 'default',
    name: '默认',
  },
];

export const fusionLogos: SceneImageType[] = [
  {
    id: 'fusionLogo1',
    type: 'default',
    name: '默认',
  },
  {
    id: 'fusionLogo2',
    type: 'default',
    name: '默认',
  },
  {
    id: 'fusionLogo3',
    type: 'default',
    name: '默认',
  },
];

const LogoSelector: React.FC<LogoSelectorProps> = ({
  /** 是否展示提示 * */
  showTip = true,
  uploadedLogoUrl,
  selectedLogoId,
  customLogos,
  loading,
  onSelect,
  onDelete,
  uploadProps,
  defaultAppName,
  appType,
  titleName,
  labelClassName,
}) => {
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [logoToDelete, setLogoToDelete] = useState<string | null>(null);

  const { special_app_lable } = useOrchestrationStore();

  console.log('appType===========', appType);

  const handleDelete = (logoUrl: string) => {
    setLogoToDelete(logoUrl);
    setDeleteModalVisible(true);
  };

  const confirmDelete = () => {
    if (logoToDelete) {
      onDelete(logoToDelete);
      setDeleteModalVisible(false);
      setLogoToDelete(null);
    }
  };

  const cancelDelete = () => {
    setDeleteModalVisible(false);
    setLogoToDelete(null);
  };

  const isSpecialApp = special_app_lable === '招生助手' || defaultAppName === '招生助手';

  const agentFilterLogos = isSpecialApp
    ? [
        // {
        //   id: 'aiaalogo',
        //   type: 'default',
        //   name: '招生助手'
        // },
        ...agentLogos,
      ]
    : agentLogos;

  return (
    <div>
      <CustomFormLabel
        className="mb-2"
        labelClassName={labelClassName}
        required
        description={showTip ? '设置智能体应用的视觉标识图标' : ''}
      >
        {titleName || '应用Logo'}
      </CustomFormLabel>

      <div className="flex flex-wrap gap-1">
        <Upload {...uploadProps}>
          <div
            className={` ${
              appType === AppCreateTypeEnum.mcp
                ? 'h-11 w-11 rounded-md bg-fill-1'
                : 'h-12 w-12 rounded-[50%] bg-fill-3'
            } border-2} flex cursor-pointer items-center justify-center border border-[#E5E6EB]`}
          >
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
          </div>
        </Upload>

        {customLogos
          ?.filter((logoUrl) => logoUrl && !defaultImgList.includes(logoUrl))
          .map((logoUrl) => (
            <div key={logoUrl} className="group relative">
              <ImageDisplay
                src={logoUrl}
                alt="自定义Logo"
                isSelected={selectedLogoId === logoUrl}
                containerClassName={` ${
                  appType === AppCreateTypeEnum.mcp
                    ? 'rounded-md w-11 h-11'
                    : 'rounded-[50%] w-12 h-12'
                } p-1`}
                appType={appType}
              />
              <div
                className={`absolute inset-0 flex items-center justify-center gap-2 bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100 ${
                  appType === AppCreateTypeEnum.mcp ? 'rounded-md' : 'rounded-[50%]'
                }`}
              >
                <Tooltip title="选中">
                  <div
                    className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
                    onClick={(e) => {
                      e.stopPropagation();
                      onSelect(logoUrl);
                    }}
                  >
                    <CheckOutlined className="text-white" />
                  </div>
                </Tooltip>
                <Tooltip title="删除">
                  <div
                    className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDelete(logoUrl);
                    }}
                  >
                    <DeleteOutlined className="text-white" />
                  </div>
                </Tooltip>
              </div>
            </div>
          ))}

        {/* {
          (special_app_lable === "招生助手" || defaultAppName === "招生助手") ? (
            <ImageDisplay
              src="aiaalogo"
              alt="aiaalogoLogo"
              isSelected={selectedLogoId === 'aiaalogo'}
              onClick={() => onSelect('aiaalogo')}
              containerClassName="w-12 h-12 rounded-[50%]"
            />
          ) : (
            <ImageDisplay
              src="default"
              alt="默认Logo"
              isSelected={selectedLogoId === 'default'}
              onClick={() => onSelect('default')}
              containerClassName="w-12 h-12 rounded-[50%]"
            />
          )
        } */}

        {appType === AppCreateTypeEnum.workflow && (
          <>
            {selectedLogoId &&
              DEFAULT_IMAGES[selectedLogoId] &&
              !workflowLogos.find((logo) => logo.id === selectedLogoId) && (
                <ImageDisplay
                  key={selectedLogoId}
                  src={selectedLogoId}
                  alt="自定义Logo"
                  isSelected
                  onClick={() => onSelect(selectedLogoId)}
                  containerClassName="w-12 h-12 rounded-[50%] p-1"
                  objectFit="contain"
                  appType={appType}
                />
              )}
            {workflowLogos.map((image) => (
              <ImageDisplay
                key={image.id}
                src={image.id}
                alt={image.name}
                isSelected={selectedLogoId === image.id}
                onClick={() => onSelect(image.id)}
                containerClassName="w-12 h-12 rounded-[50%] p-1"
                objectFit="contain"
                appType={appType}
              />
            ))}
          </>
        )}

        {appType === AppCreateTypeEnum.fusion && (
          <>
            {selectedLogoId &&
              DEFAULT_IMAGES[selectedLogoId] &&
              !fusionLogos.find((logo) => logo.id === selectedLogoId) && (
                <ImageDisplay
                  key={selectedLogoId}
                  src={selectedLogoId}
                  alt="自定义Logo"
                  isSelected
                  onClick={() => onSelect(selectedLogoId)}
                  containerClassName="w-12 h-12 rounded-[50%] p-1"
                  objectFit="contain"
                  appType={appType}
                />
              )}
            {fusionLogos.map((image) => (
              <ImageDisplay
                key={image.id}
                src={image.id}
                alt={image.name}
                isSelected={selectedLogoId === image.id}
                onClick={() => onSelect(image.id)}
                containerClassName="w-12 h-12 rounded-[50%] p-1"
                objectFit="contain"
                appType={appType}
              />
            ))}
          </>
        )}

        {appType === AppCreateTypeEnum.agent && (
          <>
            {selectedLogoId &&
              DEFAULT_IMAGES[selectedLogoId] &&
              !agentFilterLogos.find((logo) => logo.id === selectedLogoId) && (
                <ImageDisplay
                  key={selectedLogoId}
                  src={selectedLogoId}
                  alt="自定义Logo"
                  isSelected
                  onClick={() => onSelect(selectedLogoId)}
                  containerClassName="w-12 h-12 rounded-[50%] p-[2px]"
                  objectFit="contain"
                  appType={appType}
                />
              )}
            {agentFilterLogos.map((image) => (
              <ImageDisplay
                key={image.id}
                src={image.id}
                alt={image.name}
                isSelected={selectedLogoId === image.id}
                onClick={() => onSelect(image.id)}
                containerClassName="w-12 h-12 rounded-[50%] p-[2px]"
                objectFit="contain"
                appType={appType}
              />
            ))}
          </>
        )}

        {appType === AppCreateTypeEnum.mcp && (
          <>
            {selectedLogoId &&
              DEFAULT_IMAGES[selectedLogoId] &&
              !mcpLogos.find((logo) => logo.id === selectedLogoId) && (
                <ImageDisplay
                  key={selectedLogoId}
                  src={selectedLogoId}
                  alt="自定义Logo"
                  isSelected
                  onClick={() => onSelect(selectedLogoId)}
                  containerClassName="w-11 h-11 rounded-md p-1"
                  objectFit="contain"
                  appType={AppCreateTypeEnum.mcp}
                />
              )}
            {mcpLogos.map((image) => (
              <ImageDisplay
                key={image.id}
                src={image.id}
                alt={image.name}
                isSelected={selectedLogoId === image.id}
                onClick={() => onSelect(image.id)}
                containerClassName="w-11 h-11 rounded-md p-1"
                objectFit="contain"
                appType={AppCreateTypeEnum.mcp}
              />
            ))}
          </>
        )}

        {/* {logos.map((image) => (
          <ImageDisplay
            key={image.id}
            src={image.id}
            alt={image.name}
            isSelected={selectedLogoId === image.id}
            onClick={() => onSelect(image.id)}
            containerClassName="w-12 h-12 rounded-[50%]"
            objectFit="contain"
          />
        ))} */}
      </div>
      <TipsModals
        open={deleteModalVisible}
        onOk={confirmDelete}
        onCancel={cancelDelete}
        okText="删除"
        cancelText="取消"
      >
        确定要删除这个Logo吗？
      </TipsModals>
    </div>
  );
};

export default LogoSelector;
